// 公司领导首页
<template>
  <div class="box">
    <!-- 填报情况 -->
    <el-card class="box-card">
      <div slot="header" class="header-container">
        <span>填报情况</span>
        <div class="header-actions">
          <el-tooltip content="刷新数据" placement="top">
            <svg-icon class="action-icon" icon-class="flushed" @click="onSearch"></svg-icon>
          </el-tooltip>

          <el-tooltip content="更多数据" placement="top">
            <svg-icon class="action-icon" icon-class="more" @click="More"></svg-icon>
          </el-tooltip>
        </div>
      </div>
      <div>
        <el-table v-loading="loading" :data="tableData" stripe style="width: 100%" border height="205px">
          <el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
          <el-table-column prop="name" label="项目名称" min-width="300">
            <template slot-scope="scope">
              <el-link type="success" @click="onWork(scope.row)">{{ scope.row.name }}</el-link>
            </template>
          </el-table-column>
          <el-table-column prop="source" label="来源" min-width="180" align="center"> </el-table-column>
          <el-table-column prop="comper" label="平均完成进度" min-width="300">
            <template slot-scope="scope">
              <el-progress class="showProgressColor" :percentage="scope.row.comper"></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card>
          <div ref="echart1" id="echart1" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card>
          <div ref="echart2" id="echart2" style="width: 100%; height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { QueryPageList } from '@/api/Project/index'

export default {
  name: 'LeaderHome',
  data() {
    return {
      queryForm: {
        pagenum: 1,
        pagesize: 5,
        loguserid: this.$store.getters.userInfo.id
      },
      tableData: [],
      loading: false,
      echart1: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      },
      echart2: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '70%'],
            // adjust the start and end angle
            startAngle: 180,
            endAngle: 360,
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }
    }
  },
  // $route: {
  //   immediate: true,
  //   handler(newId) {
  //     if (newId.path == '/Fourth/LeaderHomeS') {
  //       this.onSearch()
  //     }
  //   }
  // },
  created() {
    this.onSearch()
  },
  mounted() {
    this.onChart1()
    this.onChart2()
  },
  methods: {
    async onSearch() {
      this.loading = true
      const { content } = await QueryPageList(this.queryForm)
      this.tableData = content.list
      this.total = content.total
      this.loading = false
    },

    More(data) {
      console.log(data)
      this.$router.push('/Fourth/ProjectEstablishment/ProjectEstablishment')
    },

    onWork(data) {
      console.log(data)
      this.$router.push('/Fourth/Tasklist/ImportDetailsC?id=' + data.id + '&title=' + data.name)
    },

    onChart1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echart1'))
      // 绘制图表
      myChart.setOption(this.echart1)
    },
    onChart2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('echart2'))
      // 绘制图表
      myChart.setOption(this.echart2)
    }
  }
}
</script>

<style scoped>
.box {
  min-height: calc(100vh - 90px);
  padding: 20px;
  background-color: #fdfbf2;
}
.box-card {
  margin-bottom: 20px;
  background-color: transparent;
}
.el-card {
  background-color: transparent;
}

.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}
/* 刷新与更多 */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 12px; /* 图标间距 */
}

.action-icon {
  font-size: 20px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.action-icon:hover {
  color: #1890ff; /* 悬停效果 */
}
</style>
